<template>
	<view class="map">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :scale="scale" show-location style="width: 100vw; height: 75vh;" :latitude="latitude" :longitude="longitude"
				 :markers="markers">
				</map>
			</view>
			<view class="place">
				<view class="address">
					{{address}}
				</view>
				<view class="distance">123.456千米</view>
			</view>
			<view class="course">查看路线</view>
			<view @click="test">获取位置地址</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'map',
				latitude: "40.013305",
				longitude: "118.685713",
				covers: [],
				address: "",
				scale: "18",
				markers: [{
					id: 1,
					latitude: "",
					longitude: "",
					name: 'ceshi'
				}],
				// marker:[{
				// 	id:0,
				// 	latitude:40.013305,
				// 	　longitude: 118.685713,//经度
				// 	   　　iconPath: '../../images/收藏.png',    //显示的图标        
				// 	   　　rotate:0,   // 旋转度数
				// 	   　　width:20,   //宽
				// 	   　　height:20,   //高
				// 	  　　 title:'你在哪了',//标注点名
				// 	  　　 alpha:0.5 ,  //透明度
				// 	  　　 label:{//为标记点旁边增加标签   //因背景颜色H5不支持
				// 	  　　 content:'唐山迁安',//文本
				// 	　　　　color:'red',//文本颜色
				// 	}

				// }]
			}
		},
		methods: {
			test() {
				debugger
				uni.getLocation({
					type: "wgs84",
					geocode: true,

					success: function(res, address) {
						console.log('当前经度' + res.longitude)
						console.log("当前纬度" + res.latitude)
						console.log('速度' + res.speed)
						console.log("地址" + res.address)
						console.log("地址" + res + JSON.stringify(res))
						console.log("地址" + address)
					}
				})
				uni.chooseLocation({
					success: function (res) {
					        console.log('位置名称：' + res.name);
					        console.log('详细地址：' + res.address);
					    }
				})
			}
		},
		onLoad(options) {
			let self = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前经度' + res.longitude)
					console.log("当前纬度" + res.latitude)
					self.latitude = res.latitude;
					self.longitude = res.longitude
					self.markers.latitude = res.latitude;
					self.markers.longitude = res.longitude;
				}
			});
			this.address = options ? "--" : "options"
		}
	}
</script>

<style lang="scss" scoped>
	.map {
		.place {
			margin: 20rpx 40rpx;
			display: flex;
			flex-direction: column;
			line-height: 50rpx;
			font-size: 34rpx;

			.address {}

			.distance {}
		}

		.course {
			margin: 40rpx 40rpx;
			background: #007AFF;
			color: #FFFFFF;
			font-size: 34rpx;
			text-align: center;
			padding: 10rpx 0;
			border-radius: 10rpx;

		}
	}
</style>
